<!doctype html>

<head>
    <title>Move cube on click event using .moveToCoordinate()</title>
    <script include="threebox" src="./static/libs/include-mapboxgl-local.js"></script>
    <style>
        body,
        html {
            width: 100%;
            height: 100%;
            margin: 0;
        }

        #map {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id='map' class='map'></div>

    <script>
        //mapbox服务数据的访问令牌，若使用mapbox提供的样式必须要设置令牌
        mapboxgl.accessToken =
            'pk.eyJ1Ijoid29ya2luZ2RvZyIsImEiOiJjamQyZmszenczMHRoMzRuczVzaGthbGhnIn0.HTkYTE-R82N3azqscSyHkA';

        var origin = [-122.4340, 37.7353, 1000];

        var map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/light-v9',
            center: origin,
            zoom: 15.95,
            pitch: 60,
            heading: 41,
            hash: true
        });


        map.on('style.load', function () {

            map.addLayer({
                id: 'custom_layer',
                type: 'custom',
                onAdd: function (map, mbxContext) {

                    window.threebox = new Threebox(map, mbxContext);
                    threebox.setupDefaultLights();

                    // initialize geometry and material of our cube object
                    var geometry = new THREE.BoxGeometry(2000, 2000, 2000);

                    var redMaterial = new THREE.MeshPhongMaterial({
                        color: 0x660000,
                        side: THREE.DoubleSide
                    });

                    cube = new THREE.Mesh(geometry, redMaterial);

                    threebox.addAtCoordinate(cube, origin);

                    // on click of the map, move the cube to that spot
                    map.on('click', function (e) {

                        // convert screen pixels to lnglat, and format it as an array
                        var lnglat = map.unproject(e.point);
                        lnglat = [lnglat.lng, lnglat.lat, 1000];

                        threebox.moveToCoordinate(cube, lnglat)

                    })
                },

                render: function (gl, matrix) {
                    threebox.update(true);
                }
            });
        });
    </script>
</body>